<!DOCTYPE html>
<html>
<head>
	<title>树状图-收展</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="d3/style.css" />
	<script type="text/javascript" src="d3/d3.js"></script>
	<script type="text/javascript" src="d3/d3.layout.js"></script>
</head>
<body>
<div class="cell">
	<div id="body"></div>
</div>
</body>
<script type="text/javascript">
var m = [20, 120, 20, 120],
	w = 2000 - m[1] - m[3],
	h = 1000 - m[0] - m[2],
	i = 0,
	root;

//定义一个集群图布局
var tree = d3.layout.tree().size([h, w]);

//对角线生成器
var diagonal = d3.svg.diagonal().projection(function(d) {return [d.y, d.x];});

var vis = d3.select("#body").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

d3.json("flare.json", function(json) {
	root = json;
	root.x0 = h / 2;
	root.y0 = 0;

	function toggleAll(d) {
		if(d.children) {
			d.children.forEach(toggleAll);
			toggle(d);
		}
	}

	//初始化显示以显示几个节点（注释了这里，才能读取其他的json）
	root.children.forEach(toggleAll);
	toggle(root.children[1]);
	toggle(root.children[1].children[2]);
	toggle(root.children[9]);
	toggle(root.children[9].children[0]);

	update(root);
});

function update(source) {
	//树结构收起和展开的时间
	var duration = d3.event && d3.event.altKey ? 5000 : 500;

	// 计算新的树布局;reverse()是将数组翻转
	var nodes = tree.nodes(root).reverse();
//	console.log(nodes);

	// 为固定长度度规范化（这样做，可以让结构图在size定义的Y坐标发生变化时保持不变）
	nodes.forEach(function(d) {
		d.y = d.depth * 180;
	});

	//更新节点…
	var node = vis.selectAll("g.node")
		.data(nodes, function(d) {
//			console.log(d);
			return d.id || (d.id = ++i);
		});

	// 在父节点之前的位置输入任何新节点
	var nodeEnter = node.enter().append("svg:g")
		.attr("class", "node")
		.attr("transform", function(d) {
			return "translate(" + source.y0 + "," + source.x0 + ")";
		})
		.on("click", function(d) {
			toggle(d);
			update(d);
		});

	nodeEnter.append("svg:circle")
		.attr("r", 1e-6)
		.style("fill", function(d) {
			return d._children ? "lightsteelblue" : "#fff";
		});

	nodeEnter.append("svg:text")
		.attr("x", function(d) {
			return d.children || d._children ? -10 : 10;
		})
		.attr("dy", ".35em")
		.attr("text-anchor", function(d) {
			return d.children || d._children ? "end" : "start";
		})
		.text(function(d) {
			return d.name;
		})
		.style("fill-opacity", 1e-6);

	// 将节点转换到它们的新位置。
	var nodeUpdate = node.transition()
		.duration(duration)
		.attr("transform", function(d) {
			return "translate(" + d.y + "," + d.x + ")";
		});

	nodeUpdate.select("circle")
		.attr("r", 4.5)
		.style("fill", function(d) {
			return d._children ? "lightsteelblue" : "#fff";
		});

	nodeUpdate.select("text")
		.style("fill-opacity", 1);

	// 将现有节点转换到父节点的新位置。
	var nodeExit = node.exit().transition()
		.duration(duration)
		.attr("transform", function(d) {
			return "translate(" + source.y + "," + source.x + ")";
		})
		.remove();

	nodeExit.select("circle")
		.attr("r", 1e-6);

	nodeExit.select("text")
		.style("fill-opacity", 1e-6);

	// 更新链接……
	var link = vis.selectAll("path.link")
		.data(tree.links(nodes), function(d) {
			return d.target.id;
		});

	// 在父节点之前的位置输入任何新链接
	link.enter().insert("svg:path", "g")
		.attr("class", "link")
		.attr("d", function(d) {
			var o = {
				x: source.x0,
				y: source.y0
			};
			return diagonal({
				source: o,
				target: o
			});
		})
		.transition()
		.duration(duration)
		.attr("d", diagonal);

	// 过渡链接到他们的新位置。
	link.transition()
		.duration(duration)
		.attr("d", diagonal);

	// 将现有节点转换到父节点的新位置。
	link.exit().transition()
		.duration(duration)
		.attr("d", function(d) {
			var o = {
				x: source.x,
				y: source.y
			};
			return diagonal({
				source: o,
				target: o
			});
		})
		.remove();

	// 把旧的职位藏起来，等待交接。
	nodes.forEach(function(d) {
		d.x0 = d.x;
		d.y0 = d.y;
	});
}

// 切换子节点
function toggle(d) {
	if(d.children) {
		d._children = d.children;
		d.children = null;
	} else {
		d.children = d._children;
		d._children = null;
	}
}
</script>

</html>